<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
         document.querySelector('html').style.fontSize = window.screen.width/20+'px'

    </script>
    <link rel="stylesheet" href="lib/swiper/swiper.min.scss">
    <link rel="stylesheet"  type='text/css' href="css/index.css">
</head>
<body>

    <div class="loading">
        <div class="bear"></div>
        <div class="progress">
            <div class="step"></div>
        </div>
        <div class="text"></div>
        <div class="logo"></div>
        <div class="copyright">2015 BaiDu WaiMai Producted</div>
    </div>


   <div class="garden"> 
        <div class="info">
            <div class="title"></div>
            <div class="hello"></div>
        </div>
        <div class="cloud"></div>
        <div class="tree"></div>
        <div class="bear-home">
            <div class="bear"></div>
            <div class="smoke"></div>
        </div>
        <div class="glass1"></div>
        <div class="glass2"></div>
        <div class="button">
            <div class="start"></div>
            <div class="circle1"></div>
            <div class="circle2"></div>
        </div>
    </div> 

     <div class="waimai-container"> 
        <div class="swiper-wrapper">
            <div class="swiper-slide page1">
                <div class="title">
                    <h3>生活中、</h3>
                    <p>经常有这种时候...</p>
                    <div></div>
                </div>
                <div class="scroll-page">
                    <div class="bg"></div>
                    <div class="person">
                        <div class="file">
                            <div class="paper1"></div>  
                            <div class="paper2"></div>  
                            <div class="paper3"></div>  
                        </div>
                    </div>
                    <div class="sprere"></div>
                    <div class="info">
                        <div class="text"></div>
                    </div>
                    <div class="bear"></div>
                </div>
                <div class="scroll-page2"  >
                    <div class="bg"></div>
                    <div class="person">
                        <div class="leg1"></div>  
                        <div class="leg2"></div>  
                    </div>                        
                    <div class="info">
                        <div class="text"></div>
                    </div>
                </div>

                <div class="scroll-page3" >
                    <div class="bg"></div>
                    <div class="person">
                    <div class="word1"></div>
                    <div class="word2"></div>
                    <div class="word3"></div>
                    <div class="word4"></div>
                    </div>
                  
                    <div class="info">
                        <div class="text"></div>
                    </div>
                 
                </div>
               
            </div>
            <div class="swiper-slide page2">
                <div class="title">
                    <h3>这似乎</h3>
                    <p>如果有一份美味外卖...</p>
                    <p>正好出现...</p>               
                    <div></div>
                </div>
                <div class="bg"></div>
                <div class="bear">
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="cloud1"></div>
                    <div class="cloud2"></div>
                </div>
                <div class="table">
                    <div class="food"></div>
                </div>
                <div class="sprere"></div>
            </div>
                
            <div class="swiper-slide swiper-no-swiping page3 ">
                <div class="title">
                   
                        <h3>这时候</h3>
                        <p>如果有一份美味外卖...</p>
                        <p>正好出现...</p>
                        <div></div>
                   
                </div>
                <div class="bg"></div>
                <div class="yy">
                <div class="evil"></div>
                <div class="oil"></div>
                <div class="license"></div>
                </div>
                <div class="tips">
                    <div class="license1"></div>
                    <div class="oil1"></div>
                    <div class="evil1"></div>
                </div>
                <div class="bear"></div>
                <div class="animate-bear-box">
                    <div class="bear1"></div>
                    <div class="bear2"></div>
                    <div class="bear3"></div>
                </div>
                <div class="sprere"></div>
            </div>
            <div class="swiper-slide page4">
                <div class="title">
                    <h3>百度外卖</h3>
                    <p>只做有品质的外卖...</p>
                    <p>操作快捷...</p>
                    <div></div>
                </div>
                <div class="bg"></div>
                <div class="card1"></div>
                <div class="card2"></div>
                <div class="card3"></div>
                <div class="bear"></div>
                <div class="sprere"></div>
            </div>
            <div class="swiper-slide page5">
                    <div class="title">
                        <h3>无论前方</h3>
                        <p>狂风，大雨，飘雪...</p>
                        <p>始终坚持在路上...</p>
                        <div></div>
                    </div>
                    <div class="bg"></div>
                    <div class="cloud">
                        <div class="snow"></div>
                        <div class="snow"></div>
                        <div class="snow"></div>
                        <div class="snow"></div>
                        <div class="snow"></div>
                        <div class="snow"></div>
                        <div class="snow"></div>
                        <div class="snow"></div>
                    </div>
                    <div class="bear">
                        <div class="shadow"></div>
                    </div>
                    <div class="sprere"></div>

            </div>
            <div class="swiper-slide page6">
                <div class="title">
                    <h3>丰富礼品、</h3>
                    <p>让你边吃边省钱...</p>
                    <div></div>
                </div>
                <div class="bear">
                    <div class="gift-box">
                        <div><div class="gift1"></div></div>
                        <div><div class="gift2"></div></div>
                        <div><div class="gift3"></div></div>
                        <div><div class="gift4"></div></div>
                        <div><div class="gift5"></div></div>
                        <div><div class="gift6"></div></div>
                        <div><div class="gift7"></div></div>
                        <div><div class="gift8"></div></div>
                        <div><div class="gift9"></div></div>
                        <div><div class="gift10"></div></div>
                        <div><div class="gift11"></div></div>
                        <div><div class="gift12"></div></div>
                    </div>
                </div>
                 <div class="bg"></div>
                <div class="sprere"></div>
            </div>
            <div class="swiper-slide page7">
                    <div class="title">
                        <h3>所有的努力</h3>
                        <p>就是为了健康美味的外面...</p>
                        <p>呈现给你...</p>
                        <div></div>
                    </div>
                    <div class="streetlight">
                    <div class="lamplight"></div>
                    </div>
                    <div class="bear"></div>
                    <div class="car"></div>
                    <div class="share"></div>
                    <div class='text'>
                          <div>waimai .baidu .com</div>
                    </div>
                    <div class="sprere"></div>
            </div>
        </div>
    </div> 
    <audio autoplay="autoplay" src="./audio/冯提莫 - 等下一个他.mp3"></audio> 
    <div class="control"></div>
    </body>
</html>

<script src="lib/swiper/swiper.min.js"></script>
<script src="lib/zepto/zepto.js"></script>
<script src="lib/zepto/event.js"></script>
<script src="lib/zepto/fx.js"></script>
<script src="lib/zepto/fx_methods.js"></script>
<script src="lib/zepto/touch.js"></script>

<script>
      var mySwiper = new Swiper('.waimai-container', {
            direction: 'vertical',// 垂直切换选项   
              onSlideChangeEnd: function (swiper) {
                  $('.swiper-slide').eq(swiper.activeIndex).addClass('animate').siblings().removeClass('animate')//切换结束时，告诉我现在是第几个slide    
              },
              onSlideChangeStart: function () {
              $('.swiper-slide').eq(4).siblings('.page3').addClass('swiper-no-swiping')
              $('.page3').find('.yy div').attr('style','')
               $('.page3').find('.tips').attr('style', '')
                $('.page3').find('.tips div').attr('style', '')
                 $('.page3').find('.bear').attr('style', '')
                 $('.page3').find('.animate-bear-box').attr('style', '')
                 $('.page3').find('.animate-bear-box div').attr('style', '')
          },
      })
    //   document.querySelector('.loading .step').addEventListener('animationend',function () {
    //       console.log('js')
    //   })
      $(function() {
          setTimeout(() => {
              $('.loading').addClass('animate')
          }, 500);
          $('.loading .step').on('animationend',()=>{
              $('.loading').fadeOut(1000,function () {
                  $('.garden').addClass('animate')
              })
          })
          $('.garden .button').longTap(()=>{
              $('.garden .bear-home').css('animation','bearmove 1s linear')
             setTimeout(() => {
               $('.garden').fadeOut(1000,function() {
               $('.page1').addClass('animate')
            })
             }, 1000);    
          })

              $('.swiper-slide').eq(2).on('click', function () {
                  $(this).removeClass('swiper-no-swiping')
                  $('.swiper-slide.page3 .bear').css('animation', 'disappear 1s linear')            
                  $('.swiper-slide .animate-bear-box').css('opacity','1')
                   $('.swiper-slide .animate-bear-box div').css('opacity', '0')
                    $('.swiper-slide .yy div').css('animation', 'disappear 1s linear');
                  $('.swiper-slide .yy div').eq(i).css('opacity', '0');
                      var i = 0;
                 var interId = setInterval(function () {         
                     $('.swiper-slide .animate-bear-box div').eq(i).css('opacity','1').siblings().css('opacity','0');
                     
                    $('.swiper-slide .tips').css('opacity', '1')
                     $('.swiper-slide .tips div').eq(i).css('opacity', '1')
                     i++;
                          if (i == 3) {
                         clearInterval(interId);
                         $('.swiper-slide .tips div').css('animation', 'none')
                         setTimeout(() => {
                             $('.swiper-slide .tips div').css('animation', 'bearmove 1s forwards')
                           }, 800);
                     }
                  },800)     
              })        
         })

         var control = document.querySelector('.control')
         var audioDom = document.querySelector('audio')
         control.onclick=function(){
              if(audioDom.paused==true){
                  audioDom.play()
                  control.style.background="url('./image/pause.png') no-repeat center /100% 100%";
              }else{
                   audioDom.pause()
                   control.style.background ="url('./image/play.png') no-repeat center /100% 100%";
              }
         }
            //  if($(t).paused==true){
               
            //  })
        
</script>